<template>
	<div class="wrapper">
		<MyHeaderVue class="header"></MyHeaderVue>
		<div class="section">
			<div v-for="item in searchList" :key="item.id" class="main">
				<router-link class="a" :to="`/profile/editProfile/?id=` + item.id">{{ item.academyName }}</router-link>
				<div v-html="highlightHTML(item.simpleCorpus, name)"></div>
			</div>
			<div class="main" style="text-align: center" v-if="searchList.length == 0">暂无搜索结果</div>
		</div>
		<div class="res">
			<div style="margin-top: 50px">
				<a class="aToHome" style="margin-left: 30px" @click="toHome">返回首页 ></a>

				<el-pagination
					v-if="searchList.length != 0"
					style="margin-left: 500px"
					background
					:current-page="page"
					:page-size="pageSize"
					:page-sizes="[5, 7, 10, 20]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>
		</div>
		<div style="height: 30px"></div>
		<MyFooter class="footer"></MyFooter>
	</div>
</template>

<script>
import requests from '@/api/ajax'
import MyHeaderVue from './MyHeader.vue'
import MyFooter from './MyFooter.vue'
import { reqAcademiesList } from '@/api'
export default {
	data() {
		return {
			name: this.$route.query.name,
			province: this.$route.query.province,

			page: 1,
			pageSize: 10,
			total: 1,
			searchList: []
		}
	},
	components: { MyHeaderVue, MyFooter },
	methods: {
		handleSizeChange(val) {
			this.pageSize = val
			this.load()
			// console.log(`每页 ${val} 条`);
		},
		toHome() {
			this.$router.push('/home')
		},
		highlightHTML: function (html, searh_key) {
			if (!searh_key) return html
			html = String(html)
			searh_key = String(searh_key)
			html = html.replace(new RegExp(searh_key, 'g'), `<span style="color:tomato;font-weight:bold">${searh_key}</span>`)
			return html
		},
		handleCurrentChange(val) {
			this.page = val
			this.load()
		},
		async load() {
			if (this.name) {
				let res = await requests({
					url: '/academies/search',
					method: 'GET',
					params: {
						name: this.name,
						page: this.page,
						pageSize: this.pageSize
					}
				})
				console.log(res)
				this.total = res.data.total
				this.searchList = res.data.records
			} else if (this.province) {
				let res = await reqAcademiesList(this.province, this.page, this.pageSize)
				console.log(res)
				this.total = res.data.total
				this.searchList = res.data.records
			}

			// console.log(res);
			// this.total = res.data.total;
			// this.searchList = res.data.records;
		}
	},
	mounted() {
		this.load()
	}
}
</script>

<style scoped>
html,
body {
	height: 100%;
}
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.header {
	flex: 0;
}
.section {
	flex: 1;
}
.res {
	flex: 0;
}
.footer {
	flex: 0;
}

.main {
	margin: 30px;
	padding: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.a {
	display: block;
	/* text-decoration: none; */
	font-size: 20px;
	padding-bottom: 10px;
}
.aToHome {
	color: #1e41d1;
	text-decoration: solid;
	cursor: pointer;
}
a:link {
	color: #2440b3; /*未访问的链接颜色*/
}

a:visited {
	color: #1e41d1; /*已访问的链接颜色*/
}
</style>
